<!DOCTYPE html>
<!--商品注册-->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录账号 - 享受完美世界</title>
    <link rel="stylesheet" href="userResource/css/style.css">
    <link rel="stylesheet" href="userResource/css/register.css">
</head>
<body>
<script type="text/javascript" src="vendors/bootstrap/dist/js/jquery.min.js"></script>
<div class="topbar-register cl">
    <h1 class="fl logo fl"><a target="_blank" href="#"><img src="userResource/images/logo.png" alt=""></a>
    </h1>

</div>
<div class="as_register">
    <div class="lan_tab">
        <a class="ch" locale="zh-CN" href="javascript:void(0);">简体中文</a><i>|</i><a class="en" locale="en"
                                                                                   href="javascript:void(0);">English</a>
    </div>
    <div class="as_wrap ">
        <a class="logo" href="javascript:void(0);"></a>

        <div id="tabCh" class="lan_tabpage tabch" style="display: block;">
            <h2 class="tit">登录完美世界</h2>
            <p class="vicetit">登录完美世界，立即享受全方位的游戏服务</p>
            <div class="func_tab cl">
                <a href="javascript:void(0);" class="cur" onclick="selectTel()" id="modelTel">手机号登入<i></i></a>
                <a href="javascript:void(0);" class="" onclick="selectEmail()" id="modelEmail">邮箱登入 <i></i></a>
            </div>
            <div class="func_tabpage" style="display: block;">
                <!--表单-->
                <form action="" autocomplete="off">
                    <input type="hidden" name="from" value="0">
                    <input type="hidden" name="s" value="">
                    <div class="ibox mb17">
                        <input name="phone" required="required" class="t_phone phone" type="text" placeholder="手机号"
                               onFocus="idclick()">
                        <input name="email" class="t_email email" type="hidden" placeholder="邮箱号" onFocus="idclick()">
                        <input id="flag" type="hidden" value="0">
                        <i></i>
                        <span id="id_error" class="ihint ihint_error" style="display: none"></span>
                    </div>
                    <div class="ibox ibox_eye">
                        <label class="pwshow" for="psw"></label>
                        <input required="required" class="password" type="password" placeholder="登录密码" id="psw"
                               onfocus="pswclick()">
                        <i></i>
                        <span id="psw_error" class="ihint ihint_error" style="display: none;"></span>
                    </div>
                    <br>
                    <br>

                    <!--<div class="cbox">-->
                    <!--<input class="acceptcb" type="checkbox" checked="checked">-->
                    <!--<i class="check"></i>-->
                    <!--<span>我接受<a target="_blank" href="#">《完美通行证用户协议》</a>&nbsp;&nbsp;<a-->
                    <!--target="_blank"-->
                    <!--href="#">《隐私政策》</a></span>-->
                    <!--</div>-->
                    <a id="submit" class="rbtn_com rbtn_s1 mb15" href="javascript:void(0);" onclick="submitdata()">登
                        录</a>
                    <a class="rbtn_com rbtn_s2" href="#" onclick="toregister()">加入完美世界</a>
                </form>
            </div>


            <style>#mCaptcha .mCaptchaSliderShowOut *, #mCaptcha .mCaptchaSliderShowOut {
                padding: 0;
                margin: 0;
                font-family: "微软雅黑";
                box-sizing: content-box;
                text-align: left;
                line-height: 20px;
            }

            #mCaptcha .mCaptchaSliderShowOut {
                position: relative;
                z-index: 10000;
                width: 292px;
            }

            #mCaptcha .mCaptchaSlideSuccess {
                background-image: url('userResource/images/slidersuccess.png');
                width: 260px;
                height: 120px;
                background-size: 260px 120px;
                top: 0;
                z-index: 100;
                position: absolute;
                left: 260px;
            }

            #mCaptcha .mCaptchaSliderShowOut .sliderImgOuterContainer {
                overflow: hidden;
                left: 1px;
            }

            #mCaptcha .sliderImgOuterContainer a.sliderImgRefreshBtn {
                text-decoration: none;
                cursor: pointer;
                outline: none;
            }

            #mCaptcha .mCaptchaImgDiv {
                float: left;
                width: 13px;
                height: 50%;
            }

            #mCaptcha .mCaptchaContainer {
                display: block;
                width: 260px;
                height: 120px;
            }

            #mCaptcha .mCaptchaCubic {
                z-index: 10;
                display: none;
                position: absolute;
                width: 61px;
                height: 120px;
                top: 0;
                left: 0;
            }

            #mCaptcha .sliderImgOuterContainer {
                width: 260px;
                height: 120px;
                box-sizing: content-box;
                -moz-box-sizing: content-box;
                -webkit-box-sizing: content-box;
                position: relative;
                display: inline-block;
                font-size: 0;
                background: url("userResource/images/loading.png") no-repeat center #dbdbdb;
            }

            #mCaptcha #sliderImgContainer {
                position: absolute;
                width: 260px;
                height: 120px;
                left: 320px;
            }

            #mCaptcha .sliderImgOuterContainerWrapper {
                display: none;
                position: absolute;
                width: 260px;
                height: 120px;
                left: 0px;
                background: url("userResource/images/bg.png") no-repeat center;
                z-index: 1;
            }

            #mCaptcha .sliderImgAlert {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 260px;
                height: 120px;
                overflow: hidden;
            }

            #mCaptcha .sliderImgAlert p.text {
                margin: 0;
                display: none;
                position: absolute;
                z-index: 100;
                width: 100%;
                height: 21px;
                bottom: 0px;
                color: white;
                font-size: 13px;
                line-height: 21px;
                text-align: center;
            }

            #mCaptcha .sliderImgAlert p.text span {
                float: none;
                vertical-align: baseline;
            }

            #mCaptcha .sliderImgAlert p.text .wred {
                color: white;
            }

            #mCaptcha .sliderImgAlert p.text .wgreen {
                color: white;
            }

            #mCaptcha .sliderContorlBtns {
                position: absolute;
                right: 43px;
                top: 22px;
                z-index: 1000;
            }

            #mCaptcha .sliderImgRefreshBtn {
                height: 25px;
                width: 23px;
                background-position: 0px -82px;
                position: absolute;
                left: 14px;
                top: -18px;
                background-image: url("userResource/images/icon.png");
                cursor: pointer;
            }

            #mCaptcha .sliderImgRefreshBtn:hover {
            }

            #mCaptcha .sliderImgHelpBtn {
                height: 14px;
                width: 14px;
                background-position: 0 -582px;
                position: absolute;
                left: 30px;
                top: 0;
                background-image: url("userResource/images/icon.png");
                cursor: pointer;
            }

            .sliderImgHelpBtn:hover {
                background-position: 0 -596px;
            }

            #mCaptcha .mCaptchaSliderContainer {
                height: 32px;
                width: 262px;
                position: relative;
            }

            #mCaptcha .mCaptchaSlide {
                height: 18px;
                width: 13px;
                background-position: -2px -1px;
                display: block;
                position: absolute;
                top: 9px;
                left: 19px;
                background-image: url("userResource/images/icon.png");
                cursor: move;
            }

            #mCaptcha .mCaptchaSlide.active {
                background-position: -2px -20px;
            }

            #mCaptcha .mCaptchaSlide.success {
                height: 18px;
                width: 20px;
                background-position: -2px -41px;
                position: absolute;
                top: 8px;
                left: 15px;
            }

            #mCaptcha .mCaptchaSlide.fail {
                height: 18px;
                width: 20px;
                background-position: -2px -64px;
                position: absolute;
                top: 8px;
                left: 18px;
            }

            #mCaptcha .mCaptchaSliderBg {
                height: 32px;
                background: #ffffff;
                border: 1px solid #dfdfdf;
                position: relative;
            }

            #mCaptcha .mCaptchaSliderProcess {
                position: absolute;
                height: 34px;
                background-color: #999999;
            }

            #mCaptcha .mCaptchaSliderProcess.success {
                background-color: #3cd05e;
            }

            #mCaptcha .mCaptchaSliderProcess.fail {
                background-color: #e03434;
            }

            #mCaptcha .mCaptchaSliderProcessText {
                line-height: 20px;
                font-size: 14px;
                position: absolute;
                z-index: 1;
                width: 150px;
                height: 20px;
                color: #e03434;
                left: 75px;
                top: 5px;
                letter-spacing: 1px;
            }

            #mCaptcha .mCaptchaSliderResult.success {
                display: none;
                height: 19px;
                width: 28px;
                background-position: 0px -64px;
                background-repeat: no-repeat;
                background-image: url('userResource/images/icon.png');
                position: absolute;
                left: 50%;
                z-index: 1;
                margin-left: -14px;
                top: 50%;
                margin-top: -9.5px;
                background-position: 0px -64px;
            }

            #mCaptcha .mCaptchaSliderResult.fail {
                display: none;
                background-repeat: no-repeat;
                background-image: url('userResource/images/icon.png');
                position: absolute;
                height: 23px;
                width: 23px;
                background-position: 0px -89px;
                left: 50%;
                z-index: 1;
                margin-left: -11.5px;
                top: 50%;
                margin-top: -9.5px;
            }

            #mCaptcha .mCaptchaSlideBorder {
                position: relative;
                height: 34px;
                width: 48px;
                border: 1px solid #d9d9d9;
                border-radius: 5px;
                background-color: #ffffff;
                -webkit-box-shadow: 0 0 10px 15px #0CC;
                -moz-box-shadow: 0 0 2px 1px #d9d9d9;
                -o-box-shadow: 0 0 2px 1px #d9d9d9;
                -ms-box-shadow: 0 0 2px 1px #d9d9d9;
                box-shadow: 0 0 2px 1px #d9d9d9;
                top: -2px;
            }

            #mCaptcha .uptype.mCaptchaSliderShowOut {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            #mCaptcha .mCaptchaSliderheader {
                display: none;
            }

            #mCaptcha .mCaptchaSliderShowOut .blackbg {
                display: none;
            }

            #mCaptcha .uptype.mCaptchaSliderShowOut .blackbg {
                display: block;
                width: 100%;
                height: 100%;
                position: fixed;
                background-color: black;
                opacity: 0.6;
                filter: alpha(opacity=60);
            }

            #mCaptcha .uptype.mCaptchaSliderShowOut .mCaptchaSliderShowBox {
                z-index: 1;
                background: white;
                position: relative;
                border-radius: 10px;
                overflow: hidden;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -135px 0 0 -155px !important;
            }

            #mCaptcha .uptype.mCaptchaSliderShowOut .sliderContentBox {
                padding: 10px 30px 15px 15px;
            }

            #mCaptcha .uptype.mCaptchaSliderShowOut .mCaptchaSliderheader {
                display: block;
                background: #ddd;
                font-size: 14px;
                line-height: 42px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                text-indent: 20px;
                color: #677D8B;
            }

            #mCaptcha .uptype.mCaptchaSliderShowOut .mCaptchaSliderheader .mCaptchaSlidercancel {
                background-image: url("userResource/images/cancel.png");
                height: 14px;
                width: 14px;
                background-position: -2px -2px;
                cursor: pointer;
                position: absolute;
                right: 20px;
                top: 14px;
            }</style>
        </div>


    </div>
    <div id="isMCaptcha" style="display: none"></div>


</div>
</div>
<!--插入圆圈-->
<script type="text/javascript">
    $(function () {
        if (!$('.as_register').length) {
            return
        }
        var circle = ["<div class='circle-box'><div class='circle-1'></div>"];
        circle.push("<div class='circle-2'></div>");
        circle.push("<div class='circle-3'></div>");
        circle.push("<div class='element-1'></div>");
        circle.push("<div class='element-2'></div></div>");
        $('body').append(circle.join(''));
    });
</script>
<div class="circle-box">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="circle-3"></div>
    <div class="element-1"></div>
    <div class="element-2"></div>
</div>


<div class="paybot_wrap">
    <div class="paybot_wrap_link">
        <div><a href="#" target="_blank">公司介绍</a>|<a
                href="#" target="_blank">开发团队 </a>|<a
                href="#" target="_blank">招聘信息</a>|<a
                href="#" target="_blank">联系我们</a>|<a
                href="#" target="_blank">法律声明</a>|<a
                href="#" target="_blank">网站地图</a></div>
    </div>
    <p class="paybot_wrap_p">京ICP证：050016号&nbsp;&nbsp;《网络文化经营许可证》编号：文网文【2017】8929-1007号&nbsp;&nbsp;<a
            href="#" target="_blank">《网络视听许可证》编号：0110587</a>&nbsp;&nbsp;京公网安备11010502033859号<br><span>© 2004-2018 Perfect World Co.,Ltd. All rights reserved.</span>完美世界（北京）软件科技发展有限公司版权所有
    </p>
    <div class="paybot_wrap_img">
        <a href="#" target="_blank"><img src="images/bot_img1.png"></a>
        <a href="#" target="_blank"><img src="images/bot_img2.png"></a>
    </div>
    <style>body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, textarea, table, td {
        margin: 0;
        padding: 0;
    }

    img {
        border: 0;
    }

    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }

    .paybot_wrap {
        padding-top: 20px;
        font: normal 12px "微软雅黑";
        color: #8f8f8f;
    }

    .paybot_wrap a {
        font: normal 12px "微软雅黑";
        color: #8f8f8f;
        text-decoration: none;
    }

    .paybot_wrap_link {
        height: 28px;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    .paybot_wrap_link div {
        width: 1002px;
        height: 28px;
        margin: 0 auto;
        line-height: 28px;
        text-align: center;
    }

    .paybot_wrap_link div a {
        margin: 0 15px;
    }

    .paybot_wrap_p {
        width: 1002px;
        margin: 10px auto 0;
        line-height: 20px;
        text-align: center;
    }

    .paybot_wrap_img {
        padding: 10px 0 20px;
        text-align: center;
    }

    .paybot_wrap_img img {
        margin: 0 10px;
    }</style>
</div>
<script type="text/javascript">
    function selectEmail() {
        $("#modelTel").attr("class", "");
        $("#modelEmail").attr("class", "cur");
        $(".phone").attr("type", "hidden");
        $(".email").attr("type", "text");
        $(".phone").removeAttr("required");
        $(".email").attr("required", "required");
        $("#flag").val(1);
    }

    function selectTel() {
        $("#modelEmail").attr("class", "");
        $("#modelTel").attr("class", "cur");
        $(".email").attr("type", "hidden");
        $(".phone").attr("type", "text");
        $(".email").removeAttr("required");
        $(".phone").attr("required", "required");
        $("#flag").val(0);
    }

    function fromData() {
        var data = {};
        var flag = $("#flag").val();
        if (flag == 0)
            data.username = $(".phone")[0].value;
        else
            data.username = $(".email")[0].value;
        data.password = $("#psw").val();
        return data;
    }

    function submitdata() {
        var from = fromData();
        $.ajax({
            url: "/user/login"
            , type: "POST"
            , data: from
            , success: function (data) {
                var code = data.code;
                switch (code) {
                    case 200:
                        console.info("页面跳转--登入页面");
                        window.location.href = "/shop/index.html";
                        break;
                    case 101:
                        $("#id_error").attr("style", "");
                        $("#id_error").text(data.msg);
                        break;
                    case 102:
                        $("#psw_error").attr("style", "");
                        $("#psw_error").text(data.msg);
                        break;
                }
            }
        });
    }

    function idclick() {
        $("#id_error").attr("style", "display: none");
        $("#id_error").text("");
    }

    function pswclick() {
        $("#psw_error").attr("style", "display: none");
        $("#psw_error").text("");
    }

    function toregister() {
        window.location.href = "/register.html";
    }

    document.onkeydown = function (event) {
        var e = event || window.event;
        if (e && e.keyCode == 13) { //回车键的键值为13
            submitdata();
        }
    };
</script>
</body>
</html>